<!DOCTYPE html>
<!-- Template Name: Clip-Two - Responsive Admin Template build with Twitter Bootstrap 3.x | Author: ClipTheme -->
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="en">
	<!--<![endif]-->
	<!-- start: HEAD -->
	<head>
		<title>Clip-Two - Responsive Admin Template</title>
		<!-- start: META -->
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!-- end: META -->
		<!-- start: GOOGLE FONTS -->
		<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
		<!-- end: GOOGLE FONTS -->
		<!-- start: MAIN CSS -->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="vendor/themify-icons/themify-icons.min.css">
		<link href="vendor/animate.css/animate.min.css" rel="stylesheet" media="screen">
		<link href="vendor/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" media="screen">
		<link href="vendor/switchery/switchery.min.css" rel="stylesheet" media="screen">
		<!-- end: MAIN CSS -->
		<!-- start: CLIP-TWO CSS -->
		<link rel="stylesheet" href="assets/css/styles.css">
		<link rel="stylesheet" href="assets/css/plugins.css">
		<link rel="stylesheet" href="assets/css/themes/theme-1.css" id="skin_color" />
		<!-- end: CLIP-TWO CSS -->
		<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
		<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
	</head>
	<!-- end: HEAD -->
	<body>
		<div id="app">
			<!-- sidebar -->
			<div class="sidebar app-aside" id="sidebar">
				<div class="sidebar-container perfect-scrollbar">
					<nav>
						<!-- start: SEARCH FORM -->
						<div class="search-form">
							<a class="s-open" href="#">
								<i class="ti-search"></i>
							</a>
							<form class="navbar-form" role="search">
								<a class="s-remove" href="#" target=".navbar-form">
									<i class="ti-close"></i>
								</a>
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search...">
									<button class="btn search-button" type="submit">
										<i class="ti-search"></i>
									</button>
								</div>
							</form>
						</div>
						<!-- end: SEARCH FORM -->
						<!-- start: MAIN NAVIGATION MENU -->
						<div class="navbar-title">
							<span>Main Navigation</span>
						</div>
						<ul class="main-navigation-menu">
							<li>
								<a href="index.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-home"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Dashboard </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-settings"></i>
										</div>
										<div class="item-inner">
											<span class="title"> UI Elements </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="ui_elements.html">
											<span class="title"> Elements </span>
										</a>
									</li>
									<li>
										<a href="ui_buttons.html">
											<span class="title"> Buttons </span>
										</a>
									</li>
									<li>
										<a href="ui_links.html">
											<span class="title"> Links </span>
										</a>
									</li>
									<li>
										<a href="ui_icons.html">
											<span class="title"> Font Awesome Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_line_icons.html">
											<span class="title"> Linear Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_modals.html">
											<span class="title"> Modals </span>
										</a>
									</li>
									<li>
										<a href="ui_toggle.html">
											<span class="title"> Toggle </span>
										</a>
									</li>
									<li>
										<a href="ui_tabs_accordions.html">
											<span class="title"> Tabs &amp; Accordions </span>
										</a>
									</li>
									<li>
										<a href="ui_panels.html">
											<span class="title"> Panels </span>
										</a>
									</li>
									<li>
										<a href="ui_notifications.html">
											<span class="title"> Notifications </span>
										</a>
									</li>
									<li>
										<a href="ui_treeview.html">
											<span class="title"> Treeview </span>
										</a>
									</li>
									<li>
										<a href="ui_media.html">
											<span class="title"> Media Object </span>
										</a>
									</li>
									<li>
										<a href="ui_nestable.html">
											<span class="title"> Nestable List </span>
										</a>
									</li>
									<li>
										<a href="ui_typography.html">
											<span class="title"> Typography </span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layout-grid2"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Tables </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="table_basic.html">
											<span class="title">Basic Tables</span>
										</a>
									</li>
									<li>
										<a href="table_responsive.html">
											<span class="title">Responsive Tables</span>
										</a>
									</li>
									<li>
										<a href="table_data.html">
											<span class="title">Advanced Data Tables</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pencil-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Forms </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="form_elements.html">
											<span class="title">Form Elements</span>
										</a>
									</li>
									<li>
										<a href="form_text_editor.html">
											<span class="title">Text Editor</span>
										</a>
									</li>
									<li>
										<a href="form_wizard.html">
											<span class="title">Form Wizard</span>
										</a>
									</li>
									<li>
										<a href="form_validation.html">
											<span class="title">Form Validation</span>
										</a>
									</li>
									<li>
										<a href="form_image_cropping.html">
											<span class="title">Image Cropping</span>
										</a>
									</li>
									<li>
										<a href="form_multiple_upload.html">
											<span class="title">Multiple File Upload</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-user"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Login </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="login_signin.html">
											<span class="title"> Login Form </span>
										</a>
									</li>
									<li>
										<a href="login_registration.html">
											<span class="title"> Registration Form </span>
										</a>
									</li>
									<li>
										<a href="login_forgot.html">
											<span class="title"> Forgot Password Form </span>
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											<span class="title">Lock Screen</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layers-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Pages </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="pages_user_profile.html">
											<span class="title">User Profile</span>
										</a>
									</li>
									<li>
										<a href="pages_invoice.html">
											<span class="title">Invoice</span>
										</a>
									</li>
									<li>
										<a href="pages_timeline.html">
											<span class="title">Timeline</span>
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											<span class="title">Calendar</span>
										</a>
									</li>
									<li>
										<a href="pages_messages.html">
											<span class="title">Messages</span>
										</a>
									</li>
									<li>
										<a href="pages_blank_page.html">
											<span class="title">Blank Page</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-package"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Utilities </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="utilities_search_result.html">
											<span class="title">Search Results</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_404.html">
											<span class="title">Error 404</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_500.html">
											<span class="title">Error 500</span>
										</a>
									</li>
									<li>
										<a href="utilities_pricing_table.html">
											<span class="title">Pricing Table</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-folder"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 3 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-menu-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 4 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="maps.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-location-pin"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Maps </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="charts.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pie-chart"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Charts </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: MAIN NAVIGATION MENU -->
						<!-- start: CORE FEATURES -->
						<div class="navbar-title">
							<span>Core Features</span>
						</div>
						<ul class="folders">
							<li>
								<a href="pages_calendar.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Calendar </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="pages_messages.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-folder-open-o fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Messages </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: CORE FEATURES -->
						<!-- start: DOCUMENTATION BUTTON -->
						<div class="wrapper">
							<a href="documentation.html" class="button-o">
								<i class="ti-help"></i>
								<span>Documentation</span>
							</a>
						</div>
						<!-- end: DOCUMENTATION BUTTON -->
					</nav>
				</div>
			</div>
			<!-- / sidebar -->
			<div class="app-content">
				<!-- start: TOP NAVBAR -->
				<header class="navbar navbar-default navbar-static-top">
					<!-- start: NAVBAR HEADER -->
					<div class="navbar-header">
						<a href="#" class="sidebar-mobile-toggler pull-left hidden-md hidden-lg" class="btn btn-navbar sidebar-toggle" data-toggle-class="app-slide-off" data-toggle-target="#app" data-toggle-click-outside="#sidebar">
							<i class="ti-align-justify"></i>
						</a>
						<a class="navbar-brand" href="#">
							<img src="assets/images/logo.png" alt="Clip-Two"/>
						</a>
						<a href="#" class="sidebar-toggler pull-right visible-md visible-lg" data-toggle-class="app-sidebar-closed" data-toggle-target="#app">
							<i class="ti-align-justify"></i>
						</a>
						<a class="pull-right menu-toggler visible-xs-block" id="menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<span class="sr-only">Toggle navigation</span>
							<i class="ti-view-grid"></i>
						</a>
					</div>
					<!-- end: NAVBAR HEADER -->
					<!-- start: NAVBAR COLLAPSE -->
					<div class="navbar-collapse collapse">
						<ul class="nav navbar-right">
							<!-- start: MESSAGES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<span class="dot-badge partition-red"></span> <i class="ti-comment"></i> <span>MESSAGES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> Unread messages</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<ul>
												<li class="unread">
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-2.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Nicole Bell</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time"> Just Now</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-3.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Steven Thompson</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">8 hrs</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-5.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Kenneth Ross</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">14 hrs</span>
															</div>
														</div>
													</a>
												</li>
											</ul>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: MESSAGES DROPDOWN -->
							<!-- start: ACTIVITIES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-check-box"></i> <span>ACTIVITIES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> You have new notifications</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<div class="list-group no-margin">
												<a class="media list-group-item" href="">
													<img class="img-circle" alt="..." src="assets/images/avatar-1.jpg">
													<span class="media-body block no-margin"> Use awesome animate.css <small class="block text-grey">10 minutes ago</small> </span>
												</a>
												<a class="media list-group-item" href="">
													<span class="media-body block no-margin"> 1.0 initial released <small class="block text-grey">1 hour ago</small> </span>
												</a>
											</div>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: ACTIVITIES DROPDOWN -->
							<!-- start: LANGUAGE SWITCHER -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-world"></i> English
								</a>
								<ul role="menu" class="dropdown-menu dropdown-light fadeInUpShort">
									<li>
										<a href="#" class="menu-toggler">
											Deutsch
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											English
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											Italiano
										</a>
									</li>
								</ul>
							</li>
							<!-- start: LANGUAGE SWITCHER -->
							<!-- start: USER OPTIONS DROPDOWN -->
							<li class="dropdown current-user">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<img src="assets/images/avatar-1.jpg" alt="Peter"> <span class="username">Peter <i class="ti-angle-down"></i></i></span>
								</a>
								<ul class="dropdown-menu dropdown-dark">
									<li>
										<a href="pages_user_profile.html">
											My Profile
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											My Calendar
										</a>
									</li>
									<li>
										<a hef="pages_messages.html">
											My Messages (3)
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											Lock Screen
										</a>
									</li>
									<li>
										<a href="login_signin.html">
											Log Out
										</a>
									</li>
								</ul>
							</li>
							<!-- end: USER OPTIONS DROPDOWN -->
						</ul>
						<!-- start: MENU TOGGLER FOR MOBILE DEVICES -->
						<div class="close-handle visible-xs-block menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<div class="arrow-left"></div>
							<div class="arrow-right"></div>
						</div>
						<!-- end: MENU TOGGLER FOR MOBILE DEVICES -->
					</div>
					<a class="dropdown-off-sidebar" data-toggle-class="app-offsidebar-open" data-toggle-target="#app" data-toggle-click-outside="#off-sidebar">
						&nbsp;
					</a>
					<!-- end: NAVBAR COLLAPSE -->
				</header>
				<!-- end: TOP NAVBAR -->
				<div class="main-content" >
					<div class="wrap-content container" id="container">
						<!-- start: PAGE TITLE -->
						<section id="page-title">
							<div class="row">
								<div class="col-sm-8">
									<h1 class="mainTitle">Documentation</h1>
									<span class="mainDescription">Getting started with Clip-Two is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we've got you covered.</span>
								</div>
								<ol class="breadcrumb">
									<li class="active">
										<span>Documentation</span>
									</li>
								</ol>
							</div>
						</section>
						<!-- end: PAGE TITLE -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Getting <span class="text-bold">Started</span></h5>
									<h2 class="margin-bottom-25 margin-top-25"> What is Clip-Two? </h2>
									<p>
										Clip-Two is an advanced, responsive dashboard template built with Bootstrap 3. This template is mobile friendly and ready for you to customize it any way you want to use it.
									</p>
									<p>
										For the bootstrap css and components, please check the
										<a target="_blank" href="http://getbootstrap.com">
											Bootstrap 3
										</a>
										documentation
									</p>
									<h2 class="margin-bottom-25 margin-top-25">Template Structure</h2>
									<p>
										This template has a fixed structure, including the following elements:
									</p>
									<ul>
										<li>
											TopBar (Header)
										</li>
										<li>
											Sidebar (with Main Navigation Menu)
										</li>
										<li>
											Sliding Right Sidebar
										</li>
										<li>
											Content
										</li>
										<li>
											Footer
										</li>
									</ul>
									<div class="alert alert-info">
										The Sidebar becomes a hidden Sliding Sidebar with a screen resolution of at least 992 pixels
									</div>
									<h2 class="margin-bottom-25 margin-top-25">Configurations</h2>
									<h4>Setup Theme</h4>
									<p>
										6 different color schemes are available on Clip-Two. If you would like to set your favorite color, you will just need to add it into the head tag.
									</p>
									<pre class="prettyprint lang-html">&lt;head&gt;
  ...
  &lt;link rel="stylesheet" href="assets/css/themes/theme-2.css" id="skin_color"&gt;
  ...</pre>
									<div class="alert alert-info">
										The available color schemes are:
										<ul>
											<li>
												theme-1.css
											</li>
											<li>
												theme-2.css
											</li>
											<li>
												theme-3.css
											</li>
											<li>
												theme-4.css
											</li>
											<li>
												theme-5.css
											</li>
											<li>
												theme-6.css
											</li>
										</ul>
									</div>
									<h4 class="margin-top-20">Fixed or Default Header and Footer</h4>
									<p>
										A fixed header and a sliding footer belong to the Clip-Two default settings. Yet, if you would like to change these settings, please, proceed as follows:
									</p>
									<div class="alert alert-info">
										from fixed to default Header: remove the class <code>app-navbar-fixed</code> to the <code>#app</code> div
									</div>
									<div class="alert alert-info">
										from default to fixed Footer: add the class <code>app-footer-fixed</code> to the <code>#app</code> div
									</div>
									<p>
										You can also combine two or more classes:
									</p>
									<pre class="prettyprint lang-html">&lt;head&gt;
...
&lt;div id="app" class="app-navbar-fixed app-footer-fixed"&gt;
...</pre>
									<h4 class="margin-top-20">Fixed or Default Sidebar</h4>
									<p>
										A fixed Sidebar belong to the Clip-Two default settings. Yet, if you would like to change these settings, please, proceed as follows:
									</p>
									<div class="alert alert-info">
										from fixed to default Sidebar: remove the class <code>app-sidebar-fixed</code> to the <code>#app</code> div
									</div>
								</div>
							</div>
						</div>
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Clip-Two <span class="text-bold">CSS</span></h5>
									<h2 class="margin-bottom-25 margin-top-25"> Getting Started With Clip-Two CSS</h2>
									<p>
										Clip-Two uses
										<a href="http://getbootstrap.com/css/" target="_blank">
											Bootstrap CSS
										</a>
										that provides global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
									</p>
									<h4 class="margin-top-20">The Grid</h4>
									<p>
										See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
									</p>
									<div class="table-responsive">
										<table class="table table-bordered table-striped">
											<thead>
												<tr>
													<th></th>
													<th> Extra small devices <small>Phones (&lt;768px)</small></th>
													<th> Small devices <small>Tablets (≥768px)</small></th>
													<th> Medium devices <small>Desktops (≥992px)</small></th>
													<th> Large devices <small>Desktops (≥1200px)</small></th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<th scope="row" class="text-nowrap">Grid behavior</th>
													<td>Horizontal at all times</td>
													<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
												</tr>
												<tr>
													<th scope="row" class="text-nowrap">Container width</th>
													<td>None (auto)</td>
													<td>750px</td>
													<td>970px</td>
													<td>1170px</td>
												</tr>
												<tr>
													<th scope="row" class="text-nowrap">Class prefix</th>
													<td><code>.col-xs-</code></td>
													<td><code>.col-sm-</code></td>
													<td><code>.col-md-</code></td>
													<td><code>.col-lg-</code></td>
												</tr>
												<tr>
													<th scope="row" class="text-nowrap"># of columns</th>
													<td colspan="4">12</td>
												</tr>
												<tr>
													<th scope="row" class="text-nowrap">Column width</th>
													<td class="text-muted">Auto</td>
													<td>~62px</td>
													<td>~81px</td>
													<td>~97px</td>
												</tr>
												<tr>
													<th scope="row" class="text-nowrap">Gutter width</th>
													<td colspan="4">30px (15px on each side of a column)</td>
												</tr>
												<tr>
													<th scope="row" class="text-nowrap">Nestable</th>
													<td colspan="4">Yes</td>
												</tr>
												<tr>
													<th scope="row" class="text-nowrap">Offsets</th>
													<td colspan="4">Yes</td>
												</tr>
												<tr>
													<th scope="row" class="text-nowrap">Column ordering</th>
													<td colspan="4">Yes</td>
												</tr>
											</tbody>
										</table>
									</div>
									<h5 class="margin-top-20">Example: Stacked-to-horizontal</h5>
									<p>
										Using a single set of <code>.col-md-*</code> grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any <code>.row</code>.
									</p>
									<div class="show-grid clearfix">
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
										<div class="col-md-1">
											.col-md-1
										</div>
									</div>
									<div class="show-grid clearfix">
										<div class="col-md-8">
											.col-md-8
										</div>
										<div class="col-md-4">
											.col-md-4
										</div>
									</div>
									<div class="show-grid clearfix">
										<div class="col-md-4">
											.col-md-4
										</div>
										<div class="col-md-4">
											.col-md-4
										</div>
										<div class="col-md-4">
											.col-md-4
										</div>
									</div>
									<div class="show-grid clearfix">
										<div class="col-md-6">
											.col-md-6
										</div>
										<div class="col-md-6">
											.col-md-6
										</div>
									</div>
									<h5 class="margin-top-20">Example: Mobile and desktop</h5>
									<p>
										Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code><code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.
									</p>
									<div class="show-grid clearfix">
										<div class="col-xs-12 col-md-8">
											.col-xs-12 .col-md-8
										</div>
										<div class="col-xs-6 col-md-4">
											.col-xs-6 .col-md-4
										</div>
									</div>
									<div class="show-grid clearfix">
										<div class="col-xs-6 col-md-4">
											.col-xs-6 .col-md-4
										</div>
										<div class="col-xs-6 col-md-4">
											.col-xs-6 .col-md-4
										</div>
										<div class="col-xs-6 col-md-4">
											.col-xs-6 .col-md-4
										</div>
									</div>
									<div class="show-grid clearfix">
										<div class="col-xs-6">
											.col-xs-6
										</div>
										<div class="col-xs-6">
											.col-xs-6
										</div>
									</div>
									<h5 class="margin-top-20">Example: Mobile, tablet, desktop</h5>
									<p>
										Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.
									</p>
									<div class="show-grid clearfix">
										<div class="col-xs-12 col-sm-6 col-md-8">
											.col-xs-12 .col-sm-6 .col-md-8
										</div>
										<div class="col-xs-6 col-md-4">
											.col-xs-6 .col-md-4
										</div>
									</div>
									<div class="show-grid clearfix">
										<div class="col-xs-6 col-sm-4">
											.col-xs-6 .col-sm-4
										</div>
										<div class="col-xs-6 col-sm-4">
											.col-xs-6 .col-sm-4
										</div>
										<!-- Optional: clear the XS cols if their content doesn't match in height -->
										<div class="clearfix visible-xs-block"></div>
										<div class="col-xs-6 col-sm-4">
											.col-xs-6 .col-sm-4
										</div>
									</div>
									<h5 class="margin-top-20">Offsetting columns</h5>
									<p>
										Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.
									</p>
									<div class="show-grid clearfix">
										<div class="col-md-4">
											.col-md-4
										</div>
										<div class="col-md-4 col-md-offset-4">
											.col-md-4 .col-md-offset-4
										</div>
									</div>
									<div class="show-grid clearfix">
										<div class="col-md-3 col-md-offset-3">
											.col-md-3 .col-md-offset-3
										</div>
										<div class="col-md-3 col-md-offset-3">
											.col-md-3 .col-md-offset-3
										</div>
									</div>
									<div class="show-grid clearfix">
										<div class="col-md-6 col-md-offset-3">
											.col-md-6 .col-md-offset-3
										</div>
									</div>
									<h5 class="margin-top-20">Nesting columns</h5>
									<p>
										To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
									</p>
									<div class="show-grid clearfix">
										<div class="col-sm-9">
											Level 1: .col-sm-9
											<div class="row show-grid">
												<div class="col-xs-8 col-sm-6">
													Level 2: .col-xs-8 .col-sm-6
												</div>
												<div class="col-xs-4 col-sm-6">
													Level 2: .col-xs-4 .col-sm-6
												</div>
											</div>
										</div>
									</div>
									<h4 class="margin-top-20">CSS Utilities</h4>
									<p>
										In addition to the default bootstrap css, Clip-Two includes classes that can help you speed up your development work
									</p>
									<table class="table table-border bg-white b-a">
										<thead>
											<tr>
												<th colspan="2">Margin</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>.no-margin</code></code></code></code></td><td>margin: 0 </td>
											</tr>
											<tr>
												<td><code>.margin-bottom-0</code></code></code></td><td>margin-bottom: 0 </td>
											</tr>
											<tr>
												<td><code>.margin-bottom-5</code></code></code></td><td>margin-bottom: 5px </td>
											</tr>
											<tr>
												<td><code>.margin-bottom-10</code></code></code></td><td>margin-bottom: 10px </td>
											</tr>
											<tr>
												<td><code>.margin-bottom-15</code></code></code></td><td>margin-bottom: 15px </td>
											</tr>
											<tr>
												<td><code>.margin-bottom-20</code></code></code></td><td>margin-bottom: 20px </td>
											</tr>
											<tr>
												<td><code>.margin-bottom-25</code></code></code></td><td>margin-bottom: 25px </td>
											</tr>
											<tr>
												<td><code>.margin-bottom-30</code></code></code></td><td>margin-bottom: 30px </td>
											</tr>
											<tr>
												<td><code>.margin-top-0</code></code></code></td><td>margin-top: 0 </td>
											</tr>
											<tr>
												<td><code>.margin-top-5</code></code></code></td><td>margin-top: 5px </td>
											</tr>
											<tr>
												<td><code>.margin-top-10</code></code></code></td><td>margin-top: 10px </td>
											</tr>
											<tr>
												<td><code>.margin-top-15</code></code></code></td><td>margin-top: 15px </td>
											</tr>
											<tr>
												<td><code>.margin-top-20</code></code></code></td><td>margin-top: 20px </td>
											</tr>
											<tr>
												<td><code>.margin-top-25</code></code></code></td><td>margin-top: 25px </td>
											</tr>
											<tr>
												<td><code>.margin-top-30</code></code></code></td><td>margin-top: 30px </td>
											</tr>
											<tr>
												<td><code>.margin-right-0</code></code></code></td><td>margin-right: 0 </td>
											</tr>
											<tr>
												<td><code>.margin-right-5</code></code></code></td><td>margin-right: 5px </td>
											</tr>
											<tr>
												<td><code>.margin-right-10</code></code></code></td><td>margin-right: 10px </td>
											</tr>
											<tr>
												<td><code>.margin-right-15</code></code></code></td><td>margin-right: 15px </td>
											</tr>
											<tr>
												<td><code>.margin-right-20</code></code></code></td><td>margin-right: 20px </td>
											</tr>
											<tr>
												<td><code>.margin-right-25</code></code></code></td><td>margin-right: 25px </td>
											</tr>
											<tr>
												<td><code>.margin-right-30</code></code></code></td><td>margin-right: 30px </td>
											</tr>
											<tr>
												<td><code>.margin-left-0</code></code></code></td><td>margin-left: 0 </td>
											</tr>
											<tr>
												<td><code>.margin-left-5</code></code></code></td><td>margin-left: 5px </td>
											</tr>
											<tr>
												<td><code>.margin-left-10</code></code></code></td><td>margin-left: 10px </td>
											</tr>
											<tr>
												<td><code>.margin-left-15</code></code></code></td><td>margin-left: 15px </td>
											</tr>
											<tr>
												<td><code>.margin-left-20</code></code></code></td><td>margin-left: 20px </td>
											</tr>
											<tr>
												<td><code>.margin-left-25</code></code></code></td><td>margin-left: 25px </td>
											</tr>
											<tr>
												<td><code>.margin-left-30</code></code></code></td><td>margin-left: 30px </td>
											</tr>
										</tbody>
									</table>
									<table class="table table-border bg-white b-a">
										<thead>
											<tr>
												<th colspan="2">Padding</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>.no-padding</code></code></code></code></td><td>padding: 0 </td>
											</tr>
											<tr>
												<td><code>.padding-bottom-0</code></code></code></td><td>padding-bottom: 0 </td>
											</tr>
											<tr>
												<td><code>.padding-bottom-5</code></code></code></td><td>padding-bottom: 5px </td>
											</tr>
											<tr>
												<td><code>.padding-bottom-10</code></code></code></td><td>padding-bottom: 10px </td>
											</tr>
											<tr>
												<td><code>.padding-bottom-15</code></code></code></td><td>padding-bottom: 15px </td>
											</tr>
											<tr>
												<td><code>.padding-bottom-20</code></code></code></td><td>padding-bottom: 20px </td>
											</tr>
											<tr>
												<td><code>.padding-bottom-25</code></code></code></td><td>padding-bottom: 25px </td>
											</tr>
											<tr>
												<td><code>.padding-bottom-30</code></code></code></td><td>padding-bottom: 30px </td>
											</tr>
											<tr>
												<td><code>.padding-top-0</code></code></code></td><td>padding-top: 0 </td>
											</tr>
											<tr>
												<td><code>.padding-top-5</code></code></code></td><td>padding-top: 5px </td>
											</tr>
											<tr>
												<td><code>.padding-top-10</code></code></code></td><td>padding-top: 10px </td>
											</tr>
											<tr>
												<td><code>.padding-top-15</code></code></code></td><td>padding-top: 15px </td>
											</tr>
											<tr>
												<td><code>.padding-top-20</code></code></code></td><td>padding-top: 20px </td>
											</tr>
											<tr>
												<td><code>.padding-top-25</code></code></code></td><td>padding-top: 25px </td>
											</tr>
											<tr>
												<td><code>.padding-top-30</code></code></code></td><td>padding-top: 30px </td>
											</tr>
											<tr>
												<td><code>.padding-right-0</code></code></code></td><td>padding-right: 0 </td>
											</tr>
											<tr>
												<td><code>.padding-right-5</code></code></code></td><td>padding-right: 5px </td>
											</tr>
											<tr>
												<td><code>.padding-right-10</code></code></code></td><td>padding-right: 10px </td>
											</tr>
											<tr>
												<td><code>.padding-right-15</code></code></code></td><td>padding-right: 15px </td>
											</tr>
											<tr>
												<td><code>.padding-right-20</code></code></code></td><td>padding-right: 20px </td>
											</tr>
											<tr>
												<td><code>.padding-right-25</code></code></code></td><td>padding-right: 25px </td>
											</tr>
											<tr>
												<td><code>.padding-right-30</code></code></code></td><td>padding-right: 30px </td>
											</tr>
											<tr>
												<td><code>.padding-left-0</code></code></code></td><td>padding-left: 0 </td>
											</tr>
											<tr>
												<td><code>.padding-left-5</code></code></code></td><td>padding-left: 5px </td>
											</tr>
											<tr>
												<td><code>.padding-left-10</code></code></code></td><td>padding-left: 10px </td>
											</tr>
											<tr>
												<td><code>.padding-left-15</code></code></code></td><td>padding-left: 15px </td>
											</tr>
											<tr>
												<td><code>.padding-left-20</code></code></code></td><td>padding-left: 20px </td>
											</tr>
											<tr>
												<td><code>.padding-left-25</code></code></code></td><td>padding-left: 25px </td>
											</tr>
											<tr>
												<td><code>.padding-left-30</code></code></code></td><td>padding-left: 30px </td>
											</tr>
										</tbody>
									</table>
									<table class="table table-border bg-white b-a">
										<thead>
											<tr>
												<th colspan="2">Border</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>.no-border</code></code></td><td>border: none </td>
											</tr>
											<tr>
												<td><code>.border-right</code></code></td><td>border-right-style: solid;
												border-right-width: 1px;
												border-color: inherit;</td>
											</tr>
											<tr>
												<td><code>.border-left</code></code></td><td>border-left-style: solid;
												border-left-width: 1px;
												border-color: inherit;</td>
											</tr>
											<tr>
												<td><code>.border-top</code></code></td><td>border-top-style: solid;
												border-top-width: 1px;
												border-color: inherit;</td>
											</tr>
											<tr>
												<td><code>.border-bottom</code></code></td><td>border-bottom-style: solid;
												border-bottom-width: 1px;
												border-color: inherit;</td>
											</tr>
											<tr>
												<td><code>.border-light</code></code></td><td> border-color: rgba(255, 255, 255, 0.2)  (border with light color)</td>
											</tr>
											<tr>
												<td><code>.border-dark</code></code></td><td>border-color: rgba(0, 0, 0, 0.2); (border with dark color)</td>
											</tr>
										</tbody>
									</table>
									<table class="table table-border bg-white b-a">
										<thead>
											<tr>
												<th colspan="2">Radius</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>.no-radius</code></td><td> border-radius: 0 </td>
											</tr>
											<tr>
												<td><code>.radius-3</code></td><td>border-radius: 3px;</td>
											</tr>
											<tr>
												<td><code>.radius-5</code></td><td>border-radius: 5px;</td>
											</tr>
											<tr>
												<td><code>.radius-10</code></td><td>border-radius: 10px;</td>
											</tr>
										</tbody>
									</table>
									<table class="table table-border bg-white b-a">
										<thead>
											<tr>
												<th colspan="2">Text</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>.text-bold</code></td><td>font-weight: bold;</td>
											</tr>
											<tr>
												<td><code>.text-extra-small</code></td><td>font-size: 11px </td>
											</tr>
											<tr>
												<td><code>.text-small</code></td><td>font-size: 12px </td>
											</tr>
											<tr>
												<td><code>.text-extra-small</code></td><td>font-size: 11px </td>
											</tr>
											<tr>
												<td><code>.text-large </code></td><td>font-size: 16px </td>
											</tr>
											<tr>
												<td><code>.text-extra-large</code></td><td>font-size: 18px </td>
											</tr>
											<tr>
												<td><code>.text-orange</code></td><td>color: #f58a5c;</td>
											</tr>
											<tr>
												<td><code>.text-green</code></td><td>color: #1fbba6;</td>
											</tr>
											<tr>
												<td><code>.text-blue</code></td><td>color: #5f8295;</td>
											</tr>
											<tr>
												<td><code>.text-pink</code></td><td>color: #dd5a82;</td>
											</tr>
											<tr>
												<td><code>.text-purple</code></td><td>color: #dd5a82;</td>
											</tr>
											<tr>
												<td><code>.text-bricky</code></td><td>color: #894550;</td>
											</tr>
											<tr>
												<td><code>.text-yellow</code></td><td>color: #ffb848;</td>
											</tr>
											<tr>
												<td><code>.text-red</code></td><td>color: #e66b6b;</td>
											</tr>
											<tr>
												<td><code>.text-white</code></td><td>color: white;</td>
											</tr>
											<tr>
												<td><code>.text-dark</code></td><td>color: rgba(44, 47, 59, 0.4);</td>
											</tr>
											<tr>
												<td><code>.text-light</code></td><td>color: rgba(255, 255, 255, 0.6);</td>
											</tr>
											<tr>
												<td><code>.text-left</code></td><td>text-align: left;</td>
											</tr>
											<tr>
												<td><code>.text-right</code></td><td>text-align: right;</td>
											</tr>
											<tr>
												<td><code>.text-light</code></td><td>color: rgba(255, 255, 255, 0.6);</td>
											</tr>
											<tr>
												<td><code>.text-left</code></td><td>text-align: left;</td>
											</tr>
										</tbody>
									</table>
									<table class="table table-border bg-white b-a">
										<thead>
											<tr>
												<th colspan="2">Height</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>.height-155</code></td><td>height: 155px </td>
											</tr>
											<tr>
												<td><code>.height-180</code></td><td>height: 180px </td>
											</tr>
											<tr>
												<td><code>.height-200</code></td><td>height: 200px </td>
											</tr>
											<tr>
												<td><code>.height-230</code></td><td>height: 230px </td>
											</tr>
											<tr>
												<td><code>.height-250</code></td><td>height: 250px </td>
											</tr>
											<tr>
												<td><code>.height-270</code></td><td>height: 270px </td>
											</tr>
											<tr>
												<td><code>.height-300</code></td><td>height: 300px </td>
											</tr>
											<tr>
												<td><code>.height-350</code></td><td>height: 350px </td>
											</tr>
											<tr>
												<td><code>.min-height-155</code></td><td>min-height: 155px </td>
											</tr>
											<tr>
												<td><code>.min-height-180</code></td><td>min-height: 180px </td>
											</tr>
											<tr>
												<td><code>.min-height-200</code></td><td>min-height: 200px </td>
											</tr>
											<tr>
												<td><code>.min-height-230</code></td><td>min-height: 230px </td>
											</tr>
											<tr>
												<td><code>.min-height-250</code></td><td>min-height: 250px </td>
											</tr>
											<tr>
												<td><code>.min-height-270</code></td><td>min-height: 270px </td>
											</tr>
											<tr>
												<td><code>.min-height-300</code></td><td>min-height: 300px </td>
											</tr>
											<tr>
												<td><code>.min-height-350</code></td><td>min-height: 350px </td>
											</tr>
										</tbody>
									</table>
									<table class="table table-border bg-white b-a">
										<thead>
											<tr>
												<th colspan="2">Generic Classes</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>.inline</code></td><td>display: inline;</td>
											</tr>
											<tr>
												<td><code>.block</code></td><td>display: block;</td>
											</tr>
											<tr>
												<td><code>.inline-block</code></td><td>display: inline-block;</td>
											</tr>
											<tr>
												<td><code>.no-display</code></td><td>display: none;</td>
											</tr>
											<tr>
												<td><code>.vertical-align-top</code></td><td>vertical-align: top</td>
											</tr>
											<tr>
												<td><code>.vertical-align-middle</code></td><td>vertical-align: middle;</td>
											</tr>
											<tr>
												<td><code>.vertical-align-bottom</code></td><td>vertical-align: bottom;</td>
											</tr>
											<tr>
												<td><code>.float-none</code></td><td>float: none;</td>
											</tr>
											<tr>
												<td><code>.noTransform</code></td><td>-o-transform: none
												-moz-transform: none
												-ms-transform: none
												-webkit-transform: none
												transform: none </td>
											</tr>
										</tbody>
									</table>
									<h4 class="margin-top-20">Colors</h4>
									<p>
										You can use these colors to customize buttons, text, backgrounds and more.
									</p>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-primary">
												Dark Primary
											</div>
											<div class="col-xs-4 text-center no-border bg-primary">
												Primary
											</div>
											<div class="col-xs-4 text-center no-border bg-light-primary">
												Light Primary
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-azure">
												Dark Azure
											</div>
											<div class="col-xs-4 text-center no-border bg-azure">
												Azure
											</div>
											<div class="col-xs-4 text-center no-border bg-light-azure">
												Light Azure
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-blue">
												Dark Blue
											</div>
											<div class="col-xs-4 text-center no-border bg-blue">
												Blue
											</div>
											<div class="col-xs-4 text-center no-border bg-light-blue">
												Light Blue
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-purple">
												Dark Purple
											</div>
											<div class="col-xs-4 text-center no-border bg-purple">
												Purple
											</div>
											<div class="col-xs-4 text-center no-border bg-light-purple">
												Light Purple
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-red">
												Dark Red
											</div>
											<div class="col-xs-4 text-center no-border bg-red">
												Red
											</div>
											<div class="col-xs-4 text-center no-border bg-light-red">
												Light Red
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-bricky">
												Dark Bricky
											</div>
											<div class="col-xs-4 text-center no-border bg-bricky">
												Bricky
											</div>
											<div class="col-xs-4 text-center no-border bg-light-bricky">
												Light Bricky
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-orange">
												Dark Orange
											</div>
											<div class="col-xs-4 text-center no-border bg-orange">
												Orange
											</div>
											<div class="col-xs-4 text-center no-border bg-light-orange">
												Light Orange
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-yellow">
												Dark Yellow
											</div>
											<div class="col-xs-4 text-center no-border bg-yellow">
												Yellow
											</div>
											<div class="col-xs-4 text-center no-border bg-light-yellow">
												Light Yellow
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-beige">
												Dark Beige
											</div>
											<div class="col-xs-4 text-center no-border bg-beige">
												Beige
											</div>
											<div class="col-xs-4 text-center no-border bg-light-beige">
												Light Beige
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-green">
												Dark Green
											</div>
											<div class="col-xs-4 text-center no-border bg-green">
												Green
											</div>
											<div class="col-xs-4 text-center no-border bg-light-green">
												Light Green
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-4 text-center no-border bg-dark-grey">
												Dark Grey
											</div>
											<div class="col-xs-4 text-center no-border bg-grey">
												Grey
											</div>
											<div class="col-xs-4 text-center no-border bg-light-grey">
												Light Grey
											</div>
										</div>
									</div>
									<div class="col-sm-6 margin-bottom-15">
										<div class="show-grid clearfix">
											<div class="col-xs-3 text-center no-border bg-info">
												Info
											</div>
											<div class="col-xs-3 text-center no-border bg-success">
												Success
											</div>
											<div class="col-xs-3 text-center no-border bg-warning">
												Warning
											</div>
											<div class="col-xs-3 text-center no-border bg-danger">
												Danger
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Components and <span class="text-bold">Plugins</span></h5>
									<h2 class="margin-bottom-25 margin-top-25"> Plugins </h2>
									<h4 class="margin-top-20">jQuery</h4>
									<p>
										Core Javascript library
									</p>
									<p>
										<a href="http://www.jquery.com" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Twitter Bootstrap v3.x</h4>
									<p>
										Sleek, intuitive, and powerful front-end framework for faster and easier web development
									</p>
									<p>
										<a href="http://getbootstrap.com" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Font Awesome</h4>
									<p>
										Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
									</p>
									<p>
										<a href="http://fortawesome.github.io/Font-Awesome" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Modernizr</h4>
									<p>
										<strong>Modernizr</strong> is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
									</p>
									<p>
										<a href="http://modernizr.com/" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Moment.js</h4>
									<p>
										Parse, validate, manipulate, and display dates in JavaScript.
									</p>
									<p>
										<a href="http://momentjs.com/" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">perfect-scrollbar</h4>
									<p>
										Tiny but perfect jQuery scrollbar plugin.
									</p>
									<p>
										<a href="https://github.com/noraesae/perfect-scrollbar" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Masked Input Plugin</h4>
									<p>
										It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).
									</p>
									<p>
										<a href="http://digitalbush.com/projects/masked-input-plugin" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Datepicker for Bootstrap</h4>
									<p>
										Add datepicker picker to field or to any other element.
									</p>
									<p>
										<a href="http://www.eyecon.ro/bootstrap-datepicker" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Bootstrap Timepicker</h4>
									<p>
										Easily select a time for a text input using your mouse or keyboards arrow keys.
									</p>
									<p>
										<a href="http://jdewit.github.io/bootstrap-timepicker" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Bootstrap date-time Picker</h4>
									<p>
										Add date-time picker to field or to any other element.
									</p>
									<p>
										<a href="http://eonasdan.github.io/bootstrap-datetimepicker" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Nestable jQuery Plugin</h4>
									<p>
										Nestable is an interactive hierarchical list. You can drag and drop to rearrange the order. It even works well on touch-screens.
									</p>
									<p>
										<a href="http://dbushell.com/2012/06/17/nestable-jquery-plugin" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">jsTree</h4>
									<p>
										jsTree is jquery plugin, that provides interactive trees.
									</p>
									<p>
										<a href="http://www.jstree.com/" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">DataTables</h4>
									<p>
										DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table
									</p>
									<p>
										<a href="http://datatables.net" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Smart Wizard</h4>
									<p>
										Smart Wizard is a flexible jQuery plug-in for wizard like interface. It allows to group contents into sections and so it saves page space and also gives a neat and stylish interface for users.
									</p>
									<p>
										<a href="http://techlaboratory.net/smartwizard" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">jQuery Validation</h4>
									<p>
										This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.
									</p>
									<p>
										<a href="http://jqueryvalidation.org" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Jcrop</h4>
									<p>
										Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.
									</p>
									<p>
										<a href="http://deepliquid.com/content/Jcrop.html" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">jQuery File Upload</h4>
									<p>
										File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.
										Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
									</p>
									<p>
										<a href="http://blueimp.github.io/jQuery-File-Upload" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">jQuery Autosize</h4>
									<p>
										A plugin to automatically adjust textarea height.
									</p>
									<p>
										<a href="http://www.jacklmoore.com/autosize" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Select2</h4>
									<p>
										Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results
									</p>
									<p>
										<a href="http://ivaynberg.github.io/select2" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Ladda</h4>
									<p>
										Buttons with built-in loading indicators.
									</p>
									<p>
										<a href="https://github.com/hakimel/Ladda" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">FullCalendar</h4>
									<p>
										FullCalendar is a jQuery plugin that provides a full-sized, drag &amp; drop event calendar like the one below.
										It uses AJAX to fetch events on-the-fly and is easily configured to use your own feed format.
										It is visually customizable with a rich API.
									</p>
									<p>
										<a href="http://fullcalendar.io/" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Sweet Alert</h4>
									<p>
										A beautiful replacement for Javascript's "Alert"
									</p>
									<p>
										<a href="http://tristanedwards.me/sweetalert" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">Chart.js</h4>
									<p>
										Simple, clean and engaging charts for designers and developers
									</p>
									<p>
										<a href="http://www.chartjs.org/" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
									<h4 class="margin-top-20">jQuery Sparklines</h4>
									<p>
										This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. .
									</p>
									<p>
										<a href="omnipotent.net/jquery.sparkline" target="_blank"><i class="fa fa-book"></i> Official Documentation</a>
									</p>
									<hr/>
								</div>
							</div>
						</div>
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Changelog <span class="text-bold">Entries</span></h5>
									<p>
										<span class="text-gray"> version </span><span class="text-bold text-dark">1.2</span> - Mar 14, 2015
									</p>
									<ul>
										<li>
											<span class="label label-success">NEW</span>
											<h4 class="margin-top-10">HTML version</h4>
											<p>
												Clip-Two HTML Version with Bootstrap 3 &amp; jQuery
											</p>
											<p>
												<a class="dropdown-off-sidebar ng-scope" href="http://www.cliptheme.com/demo/clip-two/Html-Admin/STANDARD/index.html" target="_blank"><i class="fa fa-external-link"></i> View</a>
											</p>
										</li>
										<li>
											<span class="label label-success">NEW</span>
											<h4 class="margin-top-10">Right To Left HTML version</h4>
											<p>
												Clip-Two HTML Version RTL with Bootstrap 3 &amp; jQuery
											</p>
											<p>
												<a class="dropdown-off-sidebar ng-scope" href="http://www.cliptheme.com/demo/clip-two/Html-Admin/RTL/index.html" target="_blank"><i class="fa fa-external-link"></i> View</a>
											</p>
										</li>
										<li>
											<span class="label label-warning">FIXED</span>
											<h4 class="margin-top-10">Improvements &amp; Minor Bug Fixes</h4>
										</li>
									</ul>
									<hr/>
									<p>
										<span class="text-gray"> version </span><span class="text-bold text-dark">1.1</span> - Feb 25, 2015
									</p>
									<ul>
										<li>
											<span class="label label-success">NEW</span>
											<h4 class="margin-top-10">Chat Directive</h4>
											<p>
												An AngularJS Chat Directive exclusively for Clip-Two
												<br/>
												<strong>N.b.</strong> for best performance from version 1.0 you must replace style.css (assets/css/style.css) and _chat.scsss (master/sass/partials/_chat.scsss)
											</p>
											<p>
												<a class="dropdown-off-sidebar ng-scope" ng-click="toggle('off-sidebar')"><i class="fa fa-external-link"></i> Open off-sidebar for demo and click a name in the list.</a>
											</p>
										</li>
										<li>
											<span class="label label-success">NEW</span>
											<h4 class="margin-top-10">RTL version of Clip-Two</h4>
											<p>
												RTL is the writing system known as right-to-left (RTL) in which script runs from the right-hand side of a page and concludes on the left-hand side, such as in Arabic, Hebrew and Urdu.
											</p>
											<p>
												<a class="dropdown-off-sidebar ng-scope" href="../RTL/" target="_blank"><i class="fa fa-external-link"></i> View</a>
											</p>
										</li>
										<li>
											<span class="label label-success">NEW</span>
											<h4 class="margin-top-10">X-Editable Elements</h4>
											<p>
												Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements.
												Such technique is also known as click-to-edit or edit-in-place.
											</p>
											<p>
												<a ui-sref="app.form.xeditable"><i class="fa fa-external-link"></i> View</a>
											</p>
										</li>
										<li>
											<span class="label label-info">UPGRADE</span>
											<h4 class="margin-top-10">AngularJS and Related Extras</h4>
											<p>
												Version 1.3.13
											</p>
										</li>
										<li>
											<span class="label label-info">UPGRADE</span>
											<h4 class="margin-top-10">UI Bootstrap</h4>
											<p>
												Version 0.12.1
											</p>
										</li>
										<li>
											<span class="label label-warning">FIXED</span>
											<h4 class="margin-top-10">Mouse wheel scroll problem in IE</h4>
											<p>
												From version 1.0 you must replace style.css (assets/css/style.css) and _top-navbar.scsss (master/sass/partials/layout-elements/_top-navbar.scsss)
											</p>
										</li>
										<li>
											<span class="label label-warning">FIXED</span>
											<h4 class="margin-top-10">Improvements &amp; Minor Bug Fixes</h4>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- start: FOOTER -->
			<footer>
				<div class="footer-inner">
					<div class="pull-left">
						&copy; <span class="current-year"></span><span class="text-bold text-uppercase">ClipTheme</span>. <span>All rights reserved</span>
					</div>
					<div class="pull-right">
						<span class="go-top"><i class="ti-angle-up"></i></span>
					</div>
				</div>
			</footer>
			<!-- end: FOOTER -->
			<!-- start: OFF-SIDEBAR -->
			<div id="off-sidebar" class="sidebar">
				<div class="sidebar-wrapper">
					<ul class="nav nav-tabs nav-justified">
						<li class="active">
							<a href="#off-users" aria-controls="off-users" role="tab" data-toggle="tab">
								<i class="ti-comments"></i>
							</a>
						</li>
						<li>
							<a href="#off-favorites" aria-controls="off-favorites" role="tab" data-toggle="tab">
								<i class="ti-heart"></i>
							</a>
						</li>
						<li>
							<a href="#off-settings" aria-controls="off-settings" role="tab" data-toggle="tab">
								<i class="ti-settings"></i>
							</a>
						</li>
					</ul>
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane active" id="off-users">
							<div id="users" toggleable active-class="chat-open">
								<div class="users-list">
									<div class="sidebar-content perfect-scrollbar">
										<h5 class="sidebar-title">On-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-3.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
										<h5 class="sidebar-title">Off-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-8.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-9.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="user-chat">
									<div class="chat-content">
										<div class="sidebar-content perfect-scrollbar">
											<a class="sidebar-back pull-left" href="#" data-toggle-class="chat-open" data-toggle-target="#users"><i class="ti-angle-left"></i> <span>Back</span></a>
											<ol class="discussion">
												<li class="messages-date">
													Sunday, Feb 9, 12:58
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, Nicole
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How are you?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Hi, i am good
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Glad to see you ;)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 13:10
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															What do you think about my new Dashboard?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 15:28
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Alo...
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Are you there?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, i am here
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Your Dashboard is great
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Friday, Feb 7, 23:39
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How does the binding and digesting work in AngularJS?, Peter?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															oh that's your question?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															little reduntant, no?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															literally we get the question daily
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															I know. I, however, am not a nerd, and want to know
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															for this type of question, wouldn't it be better to try Google?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Lucky for us :)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
											</ol>
										</div>
									</div>
									<div class="message-bar">
										<div class="message-inner">
											<a class="link icon-only" href="#"><i class="fa fa-camera"></i></a>
											<div class="message-area">
												<textarea placeholder="Message"></textarea>
											</div>
											<a class="link" href="#">
												Send
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-favorites">
							<div class="users-list">
								<div class="sidebar-content perfect-scrollbar">
									<h5 class="sidebar-title">Favorites</h5>
									<ul class="media-list">
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Nicole Bell</h4>
													<span> Content Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<div class="user-label">
													<span class="label label-success">3</span>
												</div>
												<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Steven Thompson</h4>
													<span> Visual Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-settings">
							<div class="sidebar-content perfect-scrollbar">
								<h5 class="sidebar-title">General Settings</h5>
								<ul class="media-list">
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Enable Notifications</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show your E-mail</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show Offline Users</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">E-mail Alerts</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">SMS Alerts</span>
										</div>
									</li>
								</ul>
								<div class="save-options">
									<button class="btn btn-success">
										<i class="icon-settings"></i><span>Save Changes</span>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end: OFF-SIDEBAR -->
			<!-- start: SETTINGS -->
			<div class="settings panel panel-default hidden-xs hidden-sm" id="settings">
				<button ct-toggle="toggle" data-toggle-class="active" data-toggle-target="#settings" class="btn btn-default">
					<i class="fa fa-spin fa-gear"></i>
				</button>
				<div class="panel-heading">
					Style Selector
				</div>
				<div class="panel-body">
					<!-- start: FIXED HEADER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left"> Fixed header</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-header" />
						</span>
					</div>
					<!-- end: FIXED HEADER -->
					<!-- start: FIXED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-sidebar" />
						</span>
					</div>
					<!-- end: FIXED SIDEBAR -->
					<!-- start: CLOSED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Closed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="closed-sidebar" />
						</span>
					</div>
					<!-- end: CLOSED SIDEBAR -->
					<!-- start: FIXED FOOTER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed footer</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-footer" />
						</span>
					</div>
					<!-- end: FIXED FOOTER -->
					<!-- start: THEME SWITCHER -->
					<div class="colors-row setting-box">
						<div class="color-theme theme-1">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-1">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-2">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-2">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-3">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-3">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-4">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-4">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-5">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-5">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-6">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-6">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<!-- end: THEME SWITCHER -->
				</div>
			</div>
			<!-- end: SETTINGS -->
		</div>
		<!-- start: MAIN JAVASCRIPTS -->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="vendor/modernizr/modernizr.js"></script>
		<script src="vendor/jquery-cookie/jquery.cookie.js"></script>
		<script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
		<script src="vendor/switchery/switchery.min.js"></script>
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: CLIP-TWO JAVASCRIPTS -->
		<script src="assets/js/main.js"></script>
		<!-- start: JavaScript Event Handlers for this page -->
		<script>
			jQuery(document).ready(function() {
				Main.init();
			});
		</script>
		<!-- end: JavaScript Event Handlers for this page -->
		<!-- end: CLIP-TWO JAVASCRIPTS -->
	</body>
</html>
